<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>computed</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>computed</h1>
    <hr>
    <div id="app">
       <p> {{ newPrice }}</p>
       <h4>最近新闻</h4>
       <ol>
           <li v-for="item in newList">
                {{ item.title }} <span> {{ item.date }} </span>
           </li>
       </ol>
    </div>
    <script>
        var newList = [
            {title:"考生走路甩手误将准考证扔河里 消防员跳河打捞 (06/07 20:59)★★★ ·20余省公务员省考笔试放榜 作弊者特别惨",date:"2018/07/02"},
            {title:"最新 排行 国内 国际 社会 评论 深度 军事 历史 探索 图片 博客 媒体 视频 公益 手机版 新闻日历 ",date:"2018/07/05"},
            {title:"新闻列表开个新朝小吃车怎么样?2018-07-23 尚姿华佗化妆品代理 获利更轻松",date:"2018/07/15"},
            {title:"广东惠州:110千伏骆塘输变电工程投产 2018-07-20 12 [行业新闻] 湖南湘阴县生活垃圾焚烧发电厂(技改工程)",date:"2018/07/25"}
        ]
        var app = new Vue({
            el:"#app",
            data:{
                price:"15",
                list:newList
            },
            computed:{
                newPrice:function(){
                    return "$"+this.price+";"
                },
                newList:function(){
                    return this.list.reverse()
                }
            }
        });
    </script>
</body>
</html>